<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="房屋名称">
          <a-input placeholder="请输入房屋名称" v-decorator="['roomNum', {}]" />
        </a-form-item>
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所属小区">
          <a-input placeholder="请输入所属小区" v-decorator="['organizationName', {}]" />
        </a-form-item>-->

        <!--  带条件字典表下拉 -->

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属小区">
          <j-dict-select-tag
            v-decorator="['organizationName', {}]"
            :triggerChange="true"
            placeholder="请选择所属小区"
            dictCode="contract_organization,organization_name,organization_name,status = '0'"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="房型">
          <a-input placeholder="请输入房型" v-decorator="['roomType', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地址">
          <a-input placeholder="请输入地址" v-decorator="['address', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="租金">
          <a-input placeholder="请输入租金" v-decorator="['roomRental', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <a-input placeholder="请输入状态" v-decorator="['roomStatus', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
          <a-input placeholder="请输入备注" v-decorator="['remake', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="房屋配置">
          <j-checkbox
            v-model="jcheckbox.values"
            :options="jcheckbox.options"
            v-decorator="[ 'roomConfiguration', {}]"
          />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="有无管家服务">
          <!--          <a-input placeholder="请输入管家服务" v-decorator="['butlerService', {}]" />-->
          <a-select v-decorator="[ 'butlerService', {}]" placeholder="有无管家服务">
            <a-select-option :value="0">有</a-select-option>
            <a-select-option :value="1">无</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="生活超市">
          <!--            <a-input placeholder="生活超市" v-decorator="['everydayShop', {}]" />-->
          <a-select v-decorator="[ 'everydayShop', {}]" placeholder="有无生活超市">
            <a-select-option :value="0">有</a-select-option>
            <a-select-option :value="1">无</a-select-option>
          </a-select>
        </a-form-item>
        <picture-upload
          :get-url="getUrl"
          @changed="changed"
          :picture-size="5"
          :file-list="fileList"
        ></picture-upload>
      </a-form>
    </a-spin>
  </a-modal>
</template>


<script>
import { httpAction , getAction } from '@/api/manage'
import pick from 'lodash.pick'
import JCheckbox from '@/components/jeecg/JCheckbox'
import pictureUpload from './pictureUpload'

export default {
  name: 'BuildingManagementModal',
  components: {
    JCheckbox,
    pictureUpload
  },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      addList: [],
      fileList: [],
      pictureList:[],
      delList: '',
      confirmLoading: false,
      formData: {},
      form: this.$form.createForm(this),
      validatorRules: {},
      jcheckbox: {
        values: '',
        options: [
          { label: '冰箱', value: '0' },
          { label: '洗衣机', value: '1' },
          { label: '空调', value: '2' },
          { label: '窗户', value: '3' },
          { label: '床', value: '4' },
          { label: '衣柜', value: '5' },
          { label: '书桌', value: '6' },
          { label: '橱柜', value: '7' },
          { label: '热水器', value: '8' },
          { label: 'WIFI', value: '9' },
          { label: '油烟机', value: '10' }
        ]
      },
      url: {
        add: '/buildingManagement/add',
        edit: '/buildingManagement/edit',
        list: '/buildingManagement/picture/list',
        addPictures: '/buildingManagement/picture/addBatch',
        deletePictures: '/buildingManagement/picture/deleteBatch'
      }
    }
  },
  computed: {
    getUrl: function() {
      return this.url.list + '?groupId=' + this.model.id
    }
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.fileList = []
      let id = record.id
      getAction(this.url.list, {groupId:id} ).then(res => {
        this.fileList = res.result.records.map(item => {
          let picture = {}
          picture.uid = item.pictureUid
          picture.name = item.pictureName
          picture.status = 'done'
          picture.url = `${window._CONFIG['domianURL']}/${item.pictureUrl}`
          return picture
        })
      })
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'roomNum',
            'organizationName',
            'roomType',
            'roomRental',
            'roomStatus',
            'remake',
            'roomConfiguration',
            'butlerService',
            'everydayShop',
            'address'
          )
        )
        //时间格式化
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          formData = Object.assign(formData, { pictureList: this.pictureList })

          //时间格式化
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    changed({ file, fileList }) {
      this.pictureList = fileList.map(item => {
        let picture = {}
        picture.groupId = this.model.id
        picture.pictureName = item.name
        if (item.url) {
          picture.pictureUrl = item.url.replace(window._CONFIG['domianURL']+'/','')
        } else {
          picture.pictureUrl = item.response.message
        }
        picture.pictureUid = item.uid
        return picture
      })
      // this.fileList = fileList.map(item => {
      //   let picture = {}
      //   picture.groupId = this.model.id
      //   picture.pictureName = item.name
      //   if (item.url) {
      //     picture.pictureUrl = item.url
      //   } else {
      //     picture.pictureUrl = item.response.message
      //   }
      //   picture.pictureUid = item.uid
      //   return picture
      // })
      // if (file.status == 'done') {
      //   let picture = {}
      //   picture.groupId = this.model.id
      //   picture.pictureName = file.name
      //   picture.pictureUrl = file.response.message
      //   picture.pictureUid = file.uid
      //   this.addList.push(picture)
      // } else if (file.status == 'removed') {
      //   if (file.id) {
      //     this.delList ? (this.delList += ',' + file.id) : (this.delList = file.id)
      //   } else {
      //     this.addList.forEach((item,index) => {
      //       if (item.pictureUid == file.uid) {
      //         this.addList.splice(index,1)
      //       }
      //     })
      //   }
      // }
    }
  }
}
</script>

<style lang="less" scoped>
</style>